<template>
    <div class="weddinglist">
     
     <top >
        <template  #weddingList>

                                               <div class="list" v-for="(item,index) in obj" :key="index">
            <div @click="toggleTab('weddingItem1')" class="item one ">{{ item[0] }}</div>
            <div @click="toggleTab('weddingItem2')" class="item two">{{ item[1] }}</div>
            <div @click="toggleTab('weddingItem3')" class="item three">{{ item[2] }}</div>
            <div @click="toggleTab('weddingItem4')" class="item four">{{ item[3] }}</div>
        </div>
       
        </template>

     </top>
     <nav-title>
                 <template   #search="parentName">
         
                                         <div class="nav">
        <div class="top">
            <div class="title clear">
                <ul>
                    <li v-for="(item,index) in parentName.childrenName" :key="index">
                        <router-link to="">{{ item }}</router-link>
                    </li>
               
                </ul>
            </div>
            <div class="search"> 
                <input type="text" placeholder="搜索其他">
            </div>
        </div>
      
    </div >
              
          </template>
     </nav-title>

                        <!-- // is 特性动态绑定子组件
              // keep-alive 将切换出去的组件保留在内存中 -->
            <weddingItem1 :is="currentTab" keep-alive>
              </weddingItem1> 
    </div>

</template>
<script>
import top from "../components/top";
import navTitle from "../components/navTitle";
import weddingItem1 from "../components/wedding/weddingItem1";
import weddingItem2 from "../components/wedding/weddingItem2";
import weddingItem3 from "../components/wedding/weddingItem3";
import weddingItem4 from "../components/wedding/weddingItem4";
export default {
  data() {
    return {
      obj: {
        arr: ["司仪", "彩妆", "摄影", "摄像"]
      },
      currentTab: "weddingItem1"
    };
  },
  components: {
    top,
    navTitle,
    weddingItem1,
    weddingItem2,
    weddingItem3,
    weddingItem4
  },
  methods: {
    toggleTab: function(tab) {
      this.currentTab = tab;
    }
  }
};
</script>
<style scoped>
@import url("../assets/font/iconfont.css");
@import url("../assets/css/base.css");
.weddinglist {
  height: 100%;
  background-color: #121212;
}
/deep/ header {
  width: 100%;
  background-color: #121212;
  line-height: 30px;
  position: relative;
  left: 0;
  top: -30%;
}
/deep/ header .logo::before {
  content: "\e622";
  font-family: "iconfont";
  font-size: 20px;
  color: #fff;
  line-height: 60px;
}
/deep/ header .logo img {
  display: none;
}
/deep/ header .logo a {
  display: none;
}

/deep/ header .nav .nav_title {
  visibility: hidden;
}
/deep/ header .nav .nav_title::before {
  display: none;
}
/deep/ .nav_ul {
  display: none;
}

/deep/ header .list {
  width: 320px;
  height: 45px;
  line-height: 45px;
  /* background-color: #fff; */
  position: absolute;
  top: 25%;
  right: 50%;
  margin-right: -160px;
  display: flex;
  justify-content: space-between;
}

/deep/ header .list .item {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

/deep/ header .list .item:hover {
  color: #fe3b88;
  transform: scale(1.1);
  transition: all 0.3s;
  border-bottom: 2px solid #fe3b88;
}

/deep/ header .list .item:hover::after {
  content: "";
  display: block;
  width: 15px;
  /*  border-bottom: 2px solid #fe3b88; */
  margin: 0 auto;
}
.nav .top .title li:hover {
  background-color: #2c2c2c;
  border-radius: 25px;
}
</style>

